import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, Image, FlatList, TextInput, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { Common } from '../../../component/common/Common.js';
import { style } from '../../../theme/style';
import { ScrollView } from 'react-navigation';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import MethodUtil from '../../../utils/MethodUtil';
import { ApplyInfo } from '../_components/ApplyInfo'
import Modal from 'react-native-modal';
import { ApplyListCard } from '../_components/ApplyListCard';
import { ApplyBottomcCard } from '../_components/ApplyBottomcCard';
import { RefuseModal } from '../../../component/ModalVerifylComponent.js';
import ToastUtil from '../../../utils/toast';

const scale = GLOBAL.SCALE;
const searchIcon = require('../../../imgs/global/whiteSearch.png');
const select = require('../../../imgs/select.png');
const titleImgObj = require('../../../imgs/global/down.png');
let upDegreen = require('../../../imgs/my-siter/up.png');
let downDegreen = require('../../../imgs/my-siter/down.png');
const arrowIcon = require('../../../imgs/order/down.png')
const OFFER_STATUS_LIST = [
	{
		dictName: '综合排序',
		dictKey: 0
	}, {
		dictName: '按执行量升序',
		dictKey: 1
	}, , {
		dictName: '按执行量降序',
		dictKey: 2
	}, {
		dictName: '按报盘金额升序',
		dictKey: 3
	}, {
		dictName: '按报盘金额降序',
		dictKey: 4
	}
]
export class PackOfferSituation extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '报盘情况',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: {  // 头部整体样式 
				elevation: 0,
				borderBottomWidth: 0,
				backgroundColor: style.color.themeColor
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props)
		let { bidPackageId, winRule, applyId, salesType, type, periodNum } = props.navigation.state.params || {};
		this.tabIndex = 0;
		this.state = {
			status: 'loading',
			options: [],
			isModal: false,
			isCommentsModal: false,
			resData: {
				bidStatisticsTO: {},
				resourceBidList: []
			},
			selectIndex: 0,
			isAll: false,
			salesType,
			resDetail: [],
			TAB_LIST: [],
			applyType: '',
			resOverData: []
		}
		this.pageParams = {
			bidPackageId,
			applyId,
			isFullPackageFix: winRule,
			searchKey: '',
			sort: 0,
		}
		this.applyParams = {
			businessKeyList: [applyId]
		}
		this.winRule = winRule
		this.type = type
		this.periodNum = periodNum
	}

	componentWillMount() {
		// await this.getSorage()
		if (this.type == 'APPROVE') {
			this.setState({
				TAB_LIST: [
					{
						name: '报盘信息',
						applyType: 'info'
					},
					{
						name: '报盘统计',
						applyType: 'statistics'
					},
					{
						name: '报盘明细',
						applyType: 'detail',
					}
				],
				applyType: 'info'
			}, () => {
				this.initPage();
			})
		}
		else if (this.type == 'MULTIPLE') {
			this.setState({
				TAB_LIST: [
					{
						name: '报盘信息',
						applyType: 'info'
					},
					{
						name: '报盘统计',
						applyType: 'statistics'
					},
					{
						name: '报盘概览',
						applyType: 'overview'
					},
					{
						name: '报盘明细',
						applyType: 'detail',
					}
				],
				applyType: 'info'
			}, () => {
				this.initPage();
			})
		}
		else if (this.type == 'RECORD') {
			this.setState({
				TAB_LIST: [
					{
						name: '报盘统计',
						applyType: 'statistics'
					},
					{
						name: '报盘明细',
						applyType: 'detail',
					}
				],
				applyType: 'statistics'
			}, () => {
				this.initPage();
			})
		}

	}

	async initPage() {
		console.log(this.state.applyType)
		this.setState({
			status: 'loading',
		})
		let resData = '', resDetail = ''
		if (this.state.applyType === 'statistics') {
			resData = await HTTP.POST(API_GENERATE(API.PACKAGE_APPLY_NEW), this.pageParams)
			if (resData) {
				this.setState({
					resData,
					status: resData ? 'data' : 'empty',
					isAll: false
				})
			}
			else {
				this.setState({
					state: 'error'
				})
			}
		}
		else if (this.state.applyType === 'detail') {
			if (this.pageParams.isFullPackageFix === 'ALL') {
				resDetail = await HTTP.POST(API_GENERATE(API.PACKAGE_BID_COMPANY_LIST), this.pageParams)
			}
			else {
				resDetail = await HTTP.POST(API_GENERATE(API.PACKAGE_BID_RESOURCE_LIST), this.pageParams)
			}
			if (resDetail) {
				this.setState({
					resDetail,
					status: resDetail ? 'data' : 'empty',
					isAll: false
				})
			}
			else {
				this.setState({
					state: 'error'
				})
			}
		}
		else if (this.state.applyType === 'overview') {
			resOverData = await HTTP.POST(API_GENERATE(API.RESOURECE_APPLY_LIST), this.pageParams)
			if (resOverData) {
				this.setState({
					resOverData,
					status: resOverData ? 'data' : 'empty',
					isAll: false
				})
			}
			else {
				this.setState({
					state: 'error'
				})
			}
		}
	}

	onErrorRefresh = () => {
		this.initPage();
	}

	// 刷新页面
	reloadPage() {
		this.initPage();
	}


	changeTab(index) {
		if (this.tabIndex === index) return;
		if (this.type == 'MULTIPLE' && index == 3) {
			this.props.navigation.navigate('OfferDetail', { headTitle: '报盘明细', bidPackageId: this.pageParams.bidPackageId, type: 'unlimited' })
			index = 0
		}
		this.tabIndex = index;
		this.pageParams.searchKey = '';
		this.props.navigation.setParams({
			headTitle: this.state.TAB_LIST[index].name,
		})
		this.setState({
			applyType: this.state.TAB_LIST[index].applyType
		}, () => {
			this.reloadPage();
		})
	}

	// 搜索View
	_renderFilterWrap() {
		let { selectIndex, applyType } = this.state
		return (
			<View style={styles.filterWrap}>
				<View style={{ flex: 1 }}>
					<Image source={searchIcon} style={styles.searchIcon} />
					<TextInput
						ref="enterpriseInput"
						style={styles.searchInput}
						underlineColorAndroid='transparent'
						placeholder={"请输入企业/商品"}
						placeholderTextColor="rgba(255, 255, 255, .8)"
						maxLength={30}
						returnKeyType={'search'}
						defaultValue={this.pageParams.searchKey}
						onChangeText={(txt) => { this.pageParams.searchKey = txt; }}
						onSubmitEditing={() => { this.reloadPage(); }}
					/>
				</View>
				{applyType === 'overview' ?
					<TouchableOpacity onPress={() => { this.setState({ isModal: true }) }}
						style={{ paddingLeft: 20 * scale, flexDirection: "row", alignItems: "center", height: 36 * scale }}>
						<Text style={{ color: "#fff", marginRight: 5 }}>{OFFER_STATUS_LIST[selectIndex].dictName}</Text>
						<Image source={select} style={{ width: 10, height: 5, tintColor: '#fff' }} />
					</TouchableOpacity> : null
				}

			</View>
		)
	}

	_offerPackStatistics() {
		let { resData, status, salesType } = this.state
		let { resourceBidList, resourceBidBargainApplyVO } = resData
		console.log(this.pageParams.isFullPackageFix)
		return (
			<ScrollView style={styles.offerBox}>
				{
					status == 'data' ?
						<View>
							{resourceBidList && resourceBidList.map((item, index) => {
								return (
									<ApplyListCard item={item} winRule={this.pageParams.isFullPackageFix} bizModel={'Z'} salesType={salesType} key={index}
										isAll={this.pageParams.isFullPackageFix == 'ALL' ? true : false} />
								)
							})
							}
							{resourceBidBargainApplyVO ?
								<View style={{ marginTop: 25 * scale }}>
									<View style={styles.offerData}>
										<Text>申请人：{resourceBidBargainApplyVO.createByName + '(' + resourceBidBargainApplyVO.teamName + ')'}</Text>
									</View>
									<View style={styles.offerData}>
										<Text>申请时间：{resourceBidBargainApplyVO.createTime || '-'}</Text>
									</View>
									<View style={styles.offerData}>
										<Text>申请原因：{resourceBidBargainApplyVO.comments || '-'}</Text>
									</View>
								</View> : null
							}
						</View> : (<View style={{ flex: 1, marginTop: 150 * scale }}>
							<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.osnErrorRefresh} />
						</View>)
				}

			</ScrollView>
		)
	}
	_noPackStatistics() {
		let { resData, status, salesType } = this.state
		let { resourceBidList, resourceBidBargainApplyVO } = resData
		return (
			<ScrollView style={styles.offerBox}>
				{
					status == 'data' ?
						<View>
							{resourceBidList && resourceBidList.map((item, index) => {
								return (
									<View style={styles.offerItem} key={index}>
										<View style={{ flexDirection: 'row', alignItems: 'center' }}>
											<Text style={styles.offerTitle}>{item.goodsName}</Text>
											<Text style={styles.offerTitleRed}>({item.authStatusName})</Text>
										</View>
										<ApplyListCard item={item} winRule={this.pageParams.isFullPackageFix} bizModel={this.type == 'MULTIPLE' ? 'M' : 'Z'} salesType={salesType} />
									</View>
								)
							})
							}
							{resourceBidBargainApplyVO ?
								<View style={{ marginTop: 25 * scale }}>
									<View style={styles.offerData}>
										<Text>申请人：{resourceBidBargainApplyVO.createByName + '(' + resourceBidBargainApplyVO.teamName + ')'}</Text>
									</View>
									<View style={styles.offerData}>
										<Text>申请时间：{resourceBidBargainApplyVO.createTime || '-'}</Text>
									</View>
									<View style={styles.offerData}>
										<Text>申请原因：{resourceBidBargainApplyVO.comments || '-'}</Text>
									</View>
								</View> : null
							}
						</View> : (<View style={{ flex: 1, marginTop: 150 * scale }}>
							<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.onErrorRefresh} />
						</View>)
				}

			</ScrollView>
		)
	}
	_offerPackDetail() {
		let { resDetail, status } = this.state
		console.log(resDetail)
		return (
			<ScrollView style={styles.offerBox}>
				{
					status == 'data' ?
						<View>
							{resDetail.map((data, index) => {
								return (
									<TouchableOpacity style={styles.itemBox} onPress={() => {
										this.props.navigation.navigate('OfferDetail', {
											headTitle: '客户报盘明细',
											bidPackageId: this.pageParams.bidPackageId,
											bidId: data.bidId,
											type: 'package',
											totalPrice: data.totalPrice,
											purchaseQty: data.purchaseQty
										})
									}}
										key={index}
									>
										<View style={styles.itemTop}>
											<Text style={{ fontSize: 12 * scale }}>{data.companyName}</Text>
											<Image source={titleImgObj} style={styles.imgStyle} />
										</View>
										<View style={styles.itemBottom}>
											<Text style={{ fontSize: 12 * scale }}>成交总额：
											<Text style={{ fontSize: 12 * scale, fontWeight: '600' }}>
													¥{MethodUtil.toThousands(data.totalPrice || 0, 2)}
												</Text>
											</Text>
											<Text style={{ fontSize: 12 * scale }}>成交总量：
											<Text style={{ fontSize: 12 * scale, fontWeight: '600' }}>
													{data.purchaseQty}
												</Text>
											吨
										</Text>
										</View>
									</TouchableOpacity>
								)
							})
							}
						</View> : (<View style={{ flex: 1, marginTop: 150 * scale }}>
							<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.onErrorRefresh} />
						</View>)
				}

			</ScrollView>
		)
	}
	_unPackDetail() {
		let { resDetail, status } = this.state
		return (
			<ScrollView>
				{status == 'data' ?
					<View>
						{resDetail && resDetail.map((item, index) => {
							let { priceType, appOrderDetailsVTOS, chineseName, custPurNum, offerBottomPrice, suggestedPrice, udPrice, areaIdName } = item
							let qualitySum = 0
							appOrderDetailsVTOS && appOrderDetailsVTOS.map(item => {
								qualitySum += item.intentionQuantity
							})
							return (
								<View style={styles.itemBoxs} key={index}>
									<View style={styles.itemTops}>
										<View style={styles.itemTitle}>
											<View style={styles.itemTopLeft}>
												<Text style={{ color: '#040404', fontWeight: '600' }}>{chineseName}</Text>
											</View>
										</View>
										<View style={[styles.itemTitle, { paddingLeft: 10 * scale, marginTop: 12 * scale }]}>
											<Text style={styles.titleText}>数量 {custPurNum} 吨</Text>
											<View style={{ flexDirection: "row", alignItems: 'center' }}>
												{priceType == 1 ?
													<Text style={styles.titleText}>报盘底价 ¥ {MethodUtil.toThousands(offerBottomPrice || 0, 2) || '-'} 元/吨 </Text> :
													<Text style={styles.titleText}>{udPrice > 0 ? '+' : ''}¥{MethodUtil.toThousands(udPrice || 0, 2)} 元/吨 </Text>
												}
												<Text style={[styles.priceType, priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
													{priceType == 2 ? '升贴水' : '一口价'}
												</Text>
											</View>
										</View>
										<View style={[styles.itemTitle, { paddingLeft: 10 * scale, marginTop: 12 * scale }]}>
											{suggestedPrice ?
												<Text style={styles.titleText}>{areaIdName}现货价：¥{MethodUtil.toThousands(suggestedPrice || '0')}/吨 </Text> : null
											}
										</View>
									</View>
									<View style={styles.itemMiddle}>
										{appOrderDetailsVTOS && appOrderDetailsVTOS.length > 0 ?
											appOrderDetailsVTOS.map((item, index) => {
												let price
												if (priceType == 2) {
													price = item.udPrice
												}
												else {
													price = item.price
												}
												return (
													<View key={index}>
														{index <= 2 ?
															<View style={styles.costBox}>
																<Text style={{ fontSize: 12 * scale }}>{item.companyName}</Text>
																<View style={styles.costItem}>
																	<Text style={[styles.costTextLeft, { marginRight: 60 * scale }]}>成交单价</Text>
																	<Text style={styles.costNum}>{MethodUtil.toThousands(price || 0, 2) || '-'}</Text>
																	<Text style={styles.costTextLeft}>元/吨</Text>
																	{suggestedPrice ?
																		<View style={styles.costTableRight}>
																			<Image source={price - suggestedPrice > 0 ? upDegreen : downDegreen} style={styles.priceFlag} />
																			<Text style={price - suggestedPrice > 0 ? styles.tableUpText : styles.tableDownText}>{Math.abs(price - suggestedPrice)}</Text>
																		</View>
																		: null
																	}
																</View>
																<View style={styles.costItem}>
																	<Text style={[styles.costTextLeft, { marginRight: 60 * scale }]}>报盘数量</Text>
																	<Text style={styles.costNum}>{item.quantity}</Text>
																	<Text style={styles.costTextLeft}>吨</Text>
																</View>
																<View style={styles.costItem}>
																	<Text style={[styles.costTextLeft, { marginRight: 60 * scale, color: "#CA0202", marginLeft: -5 * scale }]}>*成交数量</Text>
																	<Text style={styles.costNumInput}>{item.intentionQuantity}</Text>
																	<Text style={styles.costTextLeft}>吨</Text>
																</View>
															</View> : null
														}
													</View>
												)
											})
											: null
										}
									</View>
									{
										appOrderDetailsVTOS && appOrderDetailsVTOS.length > 3 ? (
											<TouchableOpacity activeOpacity={1} style={styles.toggleImg} onPress={() => {
												this.props.navigation.navigate('NonDetailList', { data: item })
											}}>
												<Image style={styles.downImg} source={arrowIcon} />
												<Text style={{ fontSize: 10 * scale, color: '#0091FF', marginTop: 10 * scale }}>查看更多</Text>
											</TouchableOpacity>
										) : null
									}
									<View style={styles.itemBottoms}>
										<Text style={{ fontSize: 12 * scale }}>合同意向{appOrderDetailsVTOS && appOrderDetailsVTOS.length}项，总量：{qualitySum}吨</Text>
									</View>
								</View>
							)
						})}
					</View>
					: (<View style={{ flex: 1, marginTop: 150 * scale }}>
						<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.onErrorRefresh} />
					</View>)
				}


			</ScrollView>
		)
	}
	_offerOverview() {
		let { resOverData, status } = this.state
		return (
			<ScrollView style={[styles.offerBox, this.isEidt ? styles.offerBoxActive : null]}>
				{
					status == 'data' ?
						<View style={styles.offerOverview}>
							<View style={{ flexDirection: 'row' }}>
								<View style={styles.offerContentItem}>
									<Text style={styles.offerItemTitle}>
										商品
                </Text>
								</View>
								<View style={styles.offerContentItem}>
									<Text style={styles.offerItemTitle}>
										单价（元/吨）
                </Text>
								</View>
								<View style={styles.offerContentItem}>
									<Text style={styles.offerItemTitle}>
										有效报盘（吨）
                </Text>
								</View>
								<View style={styles.offerContentItem}>
									<Text style={styles.offerItemTitle}>
										已生效（吨）
                </Text>
								</View>
							</View>
							{resOverData && resOverData.length > 0 ? resOverData.map((item, index) => {
								return (
									<View style={styles.offerContent} key={index}>
										<View style={styles.offerTitleBox}>
											<Text style={{ fontSize: 10 * scale }}>
												{item.companyName}
											</Text>
										</View>
										{item.appOrderResourceVTOList.length > 0 ? item.appOrderResourceVTOList.map((itemResource, indexResource) => {
											return (
												<View style={{ flexDirection: 'row', marginTop: 5 * scale }} key={indexResource}>
													<TouchableOpacity style={styles.offerResourceTitle} onPress={() => { this.setState({ isCommentsModal: true, goodsName: itemResource.goodsName }) }}>
														<Text style={styles.offerResourceTitleText} numberOfLines={1}>
															{itemResource.goodsName}
														</Text>
													</TouchableOpacity>
													<View style={{ flex: 1 }}>
														{itemResource.appOrderNumList.length > 0 ? itemResource.appOrderNumList.map((itemNum, indexNum) => {
															return (
																<View style={styles.resourceContent} key={indexNum}>
																	<View style={styles.offerContentItem}>
																		<Text style={styles.offerItemTitle}>
																			{itemNum.priceType === 1 ? (itemNum.price ? '¥' + itemNum.price : itemNum.offerBottomPrice ? '¥' + itemNum.offerBottomPrice : '-') : (itemNum.udPrice ? '¥' + itemNum.udPrice : '-')}
																		</Text>
																	</View>
																	{itemNum.sumQuantity ?
																		<TouchableOpacity style={styles.offerContentItem} onPress={
																			() => {
																				this.props.navigation.navigate('OfferDetail',
																					{ headTitle: '有效报盘明细', bidPackageId: this.pageParams.bidPackageId, resourceId: itemNum.resourceId, status: [1, 2, 5, 6, 7], type: 'limited' })
																			}}>
																			<Text style={[styles.offerItemTitle, { color: '#0091FF' }]}>
																				{itemNum.sumQuantity}
																			</Text>
																		</TouchableOpacity> :
																		<View style={styles.offerContentItem}>
																			<Text style={[styles.offerItemTitle]}>
																				-
                              </Text>
																		</View>
																	}
																	{itemNum.sumIntentionQuantity ?
																		<TouchableOpacity style={styles.offerContentItem} onPress={
																			() => {
																				this.props.navigation.navigate('OfferDetail', {
																					headTitle: '已生效报盘明细', bidPackageId: this.pageParams.bidPackageId, resourceId: itemNum.resourceId, status: [5, 6, 7], type: 'limited'
																				})
																			}}>
																			<Text style={[styles.offerItemTitle, { color: '#0091FF' }]}>
																				{itemNum.sumIntentionQuantity}
																			</Text>
																		</TouchableOpacity> :
																		<View style={styles.offerContentItem}>
																			<Text style={[styles.offerItemTitle]}>
																				-
                                </Text>
																		</View>
																	}

																</View>
															)
														})
															: null
														}
													</View>

												</View>
											)
										}) : null
										}

									</View>
								)
							}) : null
							}

						</View> : (<View style={{ flex: 1, marginTop: 150 * scale }}>
							<PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this.onErrorRefresh} />
						</View>)
				}

			</ScrollView>
		)
	}
	_renderTabWrap() {
		return (
			<View style={styles.tabWrap}>
				{
					this.state.TAB_LIST.map((item, index) => {
						return (
							<TouchableOpacity activeOpacity={1} onPress={() => { this.changeTab(index) }} key={index} style={styles.tabItem} key={index}>
								<Text style={[styles.tabText, this.tabIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]}>{item.name}</Text>
								<View style={[styles.tabTextBottom, this.tabIndex == index ? { backgroundColor: '#fff' } : { backgroundColor: 'transparent' }]}></View>
							</TouchableOpacity>
						)
					})
				}
			</View>
		)
	}

	_refused = () => {
		this.applyParams.auditResult = 0
		this.setState({
			showRejectModal: true
		})
	}
	_agree = () => {
		this.applyParams.auditResult = 1
		this.setState({
			showRejectModal: true
		})
	}
	//成交
	approve = async () => {
		this.setState({
			showRejectModal: false,
		})
		let res = await HTTP.POST(API_GENERATE(API.DEAL_AUDIT_BATCH), this.applyParams);
		if (res) {
			this.setState({
				status: 'data',
			}, () => {
				ToastUtil.showSuccess(this.applyParams.auditResult ? '审批成功' : '驳回成功').then(() => {
					this._goBack();
				})
			})
		}
	}

	_goBack = () => {
		this.props.navigation.navigate('TransApprovalList')
	}


	_selectCallBack = (index) => {
		this.setState({
			isModal: false,
			selectIndex: index,
		}, () => {
			this.pageParams.sort = OFFER_STATUS_LIST[this.state.selectIndex].dictKey;
			this.reloadPage();
		})
	}
	render() {
		let { applyType, showRejectModal, salesType, selectIndex, isModal } = this.state
		console.log(this.pageParams.isFullPackageFix, applyType, this.type)

		return (
			<View style={styles.container}>
				{this._renderFilterWrap()}
				{this._renderTabWrap()}
				{/* 整包信息 */}
				{applyType === 'info' ? <ApplyInfo
					bidPackageId={this.pageParams.bidPackageId}
					applyId={this.pageParams.applyId}
					periodNum={this.periodNum}
					navigateTo={(bidPackageApplyId, periodNum) => {
						this.props.navigation.navigate('OfferApproveDetail', { data: { bidPackageApplyId: bidPackageApplyId, periodNum: periodNum }, salesType })
					}}
				/> : null}
				{/* 整包统计 */}
				{this.pageParams.isFullPackageFix === 'ALL' && applyType === 'statistics' ? this._offerPackStatistics() : null}
				{/* 整包明细 */}
				{this.pageParams.isFullPackageFix === 'ALL' && applyType === 'detail' ? this._offerPackDetail() : null}
				{/* 非整包&&多轮统计 */}
				{(this.pageParams.isFullPackageFix === 'SINGLE' || this.type == 'MULTIPLE') && applyType === 'statistics' ? this._noPackStatistics() : null}
				{/* 非整包明细 */}
				{this.pageParams.isFullPackageFix === 'SINGLE' && applyType === 'detail' ? this._unPackDetail() : null}
				{/* 多轮概览 */}
				{this.type == 'MULTIPLE' && applyType === 'overview' ? this._offerOverview() : null}
				{this.type == 'APPROVE' || this.type == 'MULTIPLE' ?
					<ApplyBottomcCard method={{ refused: this._refused, agree: this._agree }} /> : null
				}
				<Common type="modal" demoData={(
					<Common type="listRadio" selectIndex={selectIndex} title={'状态'} listData={OFFER_STATUS_LIST} selectCallBack={this._selectCallBack} />
				)} isVisible={isModal} closeCallballFn={() => { this.setState({ isModal: false }) }} />
				<RefuseModal
					titleText={'审批意见'}
					placeholderText={this.applyParams.auditResult ? '请输入同意原因' : '请输入驳回原因'}
					propsDefaultValue={this.applyParams.auditResult ? '同意' : '驳回'}
					visible={showRejectModal}
					btnPress={(remark) => {
						this.applyParams.remark = remark;
						this.approve();
					}}
					bgPress={() => {
						this.setState({
							showRejectModal: false,
						});
					}} />
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray,
	},
	filterWrap: {
		height: 36 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		paddingHorizontal: 30 * scale,
		backgroundColor: style.color.themeColor,
	},
	searchInput: {
		flex: 1,
		width: '100%',
		backgroundColor: 'rgba(255, 255, 255, .18)',
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		textAlign: 'center',
		paddingVertical: 0,
		position: 'relative',
		borderRadius: 8 * scale,
		color: '#fff',

	},
	searchIcon: {
		width: 20 * scale,
		height: 22 * scale,
		position: 'absolute',
		left: 20 * scale,
		top: 8 * scale,
		zIndex: 9,
		opacity: 0.8,
	},
	tabWrap: {
		backgroundColor: style.color.themeColor,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'flex-start',
		paddingLeft: 18 * scale,
		paddingRight: 18 * scale,
	},
	tabText: {
		color: '#fff',
		textAlign: 'center'
	},
	tabTextBottom: {
		marginTop: 7 * scale,
		height: 2 * scale,
		width: 80 * scale,
	},
	tabItem: {
		flex: 1,
		paddingTop: 14 * scale,
		paddingBottom: 12 * scale,
		alignItems: 'center',
		justifyContent: 'center'
		// paddingHorizontal: 50 * scale,
	},
	offerBox: {
		flex: 1,
		marginHorizontal: 20 * scale,
		marginTop: 10 * scale
	},
	offerItem: {
		backgroundColor: '#fff',
		paddingVertical: 14 * scale,
		paddingHorizontal: 20 * scale,
		borderRadius: 6 * scale,
		marginBottom: 14 * scale
	},
	offerTitle: {
		fontSize: 13,
		color: '#000000',
		fontWeight: "600"
	},
	offerTitleRed: {
		fontSize: 10,
		color: '#CA0202',
		marginLeft: 5 * scale
	},
	offerPackContent: {
		marginTop: 7 * scale,
		paddingVertical: 10 * scale,
	},
	offerContent: {
		marginTop: 7 * scale,
		backgroundColor: '#F4F7FE',
		borderRadius: 6 * scale,
		paddingVertical: 10 * scale,
	},
	offerHorizontal: {
		flexDirection: "row",
		alignItems: 'center',
		marginBottom: 25 * scale
	},
	offerContentItem: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	offerItemTitle: {
		flex: 1,
		fontSize: 11 * scale,
		paddingTop: 5 * scale,
		marginBottom: 5 * scale,
	},
	offerItemText: {
		fontSize: 11 * scale,
	},
	offerData: {
		marginBottom: 8 * scale,
		flexDirection: 'row',
		alignItems: 'center'
	},
	offerOverview: {
		backgroundColor: '#fff',
		paddingVertical: 14 * scale,
		paddingHorizontal: 10 * scale,
		borderRadius: 6 * scale
	},
	offerTitleBox: {
		marginHorizontal: 20 * scale,
		marginTop: 5 * scale,
		paddingBottom: 10 * scale,
		borderColor: '#979797',
		borderBottomWidth: 1 / PixelRatio.get(),
		marginBottom: 5 * scale
	},
	offerResourceTitle: {
		width: 100 * scale,
		paddingLeft: 20 * scale,
		marginTop: 5 * scale
	},
	offerResourceTitleText: {
		fontSize: 11,
		color: '#0091FF',
		flexWrap: 'nowrap',
	},
	resourceContent: {
		flex: 1,
		flexDirection: 'row'
	},
	commentsBody: {
		width: 300 * scale,
		paddingLeft: 25 * scale,
		paddingRight: 17 * scale,
		paddingBottom: 30 * scale,
		backgroundColor: '#fff',
		borderRadius: 13 * scale
	},
	commentsTitle: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale
	},
	commentContent: {
		fontSize: 12 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale
	},
	itemBox: {
		marginTop: 20 * scale,
		backgroundColor: '#fff',
		borderRadius: 6 * scale,
		// marginHorizontal: 20 * scale
	},
	itemTop: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingVertical: 10 * scale,
		paddingHorizontal: 10 * scale,
		borderBottomColor: '#E3E7F0',
		borderBottomWidth: 1 * scale
	},
	imgStyle: {
		tintColor: '#000',
		width: 10 * scale,
		height: 6 * scale,
		transform: [{ rotate: '-90deg' }]
	},
	itemBottom: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingTop: 13 * scale,
		paddingBottom: 20 * scale,
		paddingHorizontal: 10 * scale,
	},
	itemBoxs: {
		marginTop: 20 * scale,
		backgroundColor: '#fff',
		borderRadius: 6 * scale,
		marginHorizontal: 20 * scale
	},
	itemTops: {
		paddingVertical: 10 * scale,
		paddingRight: 10 * scale,
		borderBottomColor: '#E3E7F0',
		borderBottomWidth: 1 * scale
	},
	itemTitle: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	itemTopLeft: {
		flexDirection: 'row',
		alignItems: 'center',
		marginLeft: 8 * scale
	},
	lockView: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		height: 12 * scale,
		width: 12 * scale,
		borderWidth: 1 * scale,
		borderColor: style.color.themeColor,
		marginRight: 10 * scale,
		marginLeft: 10 * scale
	},
	lockImage: {
		tintColor: style.color.themeColor,
		width: 8 * scale,
		height: 8 * scale,
		marginLeft: 1 * scale
	},
	imgStyle: {
		tintColor: '#000',
		width: 10 * scale,
		height: 6 * scale,
		transform: [{ rotate: '-90deg' }]
	},
	itemBottoms: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		paddingBottom: 12 * scale,
		paddingHorizontal: 10 * scale,
	},
	priceType: {
		fontSize: 10,
		paddingVertical: 2,
		paddingHorizontal: 5,
		backgroundColor: '#FBEFE8',
		marginLeft: 5 * scale
	},
	titleText: {
		color: '#000',
		fontSize: 11 * scale,
		fontWeight: '600'
	},
	itemMiddle: {
		paddingVertical: 10 * scale,
		paddingHorizontal: 10 * scale,
	},
	priceFlag: {
		width: 6,
		height: 10,
		marginRight: 3
	},
	tableUpText: {
		fontSize: 10,
		color: '#E02020'
	},
	tableDownText: {
		fontSize: 10,
		color: '#56C910'
	},
	costTableRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		marginRight: 16
	},
	costItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 56 * scale,
		marginTop: 13 * scale
	},
	costBox: {
		paddingVertical: 12 * scale,
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0'
	},
	costTextLeft: {
		fontSize: 12 * scale,
		color: '#000',
		marginRight: 10 * scale
	},
	costNum: {
		fontSize: 12 * scale,
		color: '#000',
		opacity: 0.78,
		width: 80 * scale
	},
	costNumInput: {
		color: '#000',
		fontWeight: '600',
		width: 80 * scale
	},
	toggleImg: {
		width: '100%',
		marginBottom: 10 * scale,
		alignItems: "center",
		justifyContent: 'center'
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale
	},
})